<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui2.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css?v=6"/>
    <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/highcharts.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/all.js?v=4" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<style>
    .nav_right {
        float: right;
        position: absolute;
        right: 0px;
    }

    .nav_right span, .nav_right a {
        font-size: 13px;
        color: #fff;
    }
</style>
<div id="content">

    {#    <iframe frameborder=0 width='100%' height=120 marginheight=0 marginwidth=0 scrolling=no#}
    {#            src='/index/top?brand_id={{ brand_id }}&shop_id={{ shop_id }}'></iframe>#}

    <div class="topBox">
        <div class="indexTop" style="padding: 10px 0px;">

            <div class="total">
                <div class="nav_right">
                    {% if 'User'  in session %}
                        <span>{{ session['User']['UserName'] }} </span>
                        <a href="/logout">&nbsp;&nbsp;退出</a>
                        <a href="/set.html">&nbsp;&nbsp;设置</a>
                    {% endif %}
                </div>
                <label class="ysze"> {{ home_page_data['主营业数据']['应收总额'] }}</label>

                <p>应收总额</p>
            </div>

        </div>
        <ul class="summary">
            <li class="yjje">已结金额：{{ home_page_data['主营业数据']['已结金额'] }}</li>
            <li class="wjje">未结金额：{{ home_page_data['主营业数据']['未结金额'] }}</li>
            <li class="rjxf">人均消费：{{ home_page_data['主营业数据']['人均消费'] }}</li>
        </ul>
    </div>

    <div class="select" style="background: #000;border: none;">
        <div class="updateTime selectedStore">
            {#            上次更新: <span>{{ now_time }}</span>#}
            品牌: <span class="current_brand">{{ current_brand or '全部' }}</span>
        </div>
        <div class="selectedStore" style="position: absolute;right:5px">

            门店: <span class="icon3 current_shop">{{ current_shop or '' }}</span>
        </div>
    </div>
    <div class="cont">
        <div class="indexCore">

            <div class="paid">
                <div class="left">
                    <a href="/paid.html?brand_id={{ brand_id }}&shop_id={{ shop_id }}">
                        <div id="paid"></div>
                    </a>
                </div>
                <div class="right">
                    <a href="/business.html?brand_id={{ brand_id }}&shop_id={{ shop_id }}">
                        <label>营销日报</label>

                        <p>¥ </p>
                    </a>
                    <a href="/recharge.html?brand_id={{ brand_id }}&shop_id={{ shop_id }}">
                        <label>会员充值</label>

                        <p>¥ </p>
                    </a>
                    <a href="/abnormal.html?shop_id={{ shop_id }}">
                        <label>异常操作</label>

                        <p>¥ </p>
                    </a>
                </div>
            </div>


            <div class="sale">
                <div class="left">
                    <div id="sale"></div>
                </div>
                <div class="right">
                    <a href="/sale.html?brand_id={{ brand_id }}&shop_id={{ shop_id }}">
                        <img src="/static/img/i3.png"/>
                        <label>人气菜品</label>

                        <p>&nbsp;&nbsp;</p>

                    </a>
                    <a href="/unsalable.html?brand_id={{ brand_id }}&shop_id={{ shop_id }}">
                        <img src="/static/img/i4.png"/>
                        <label>滞销菜品</label>

                        <p>&nbsp;&nbsp;</p>
                    </a>
                    <a href="/retreat.html?brand_id={{ brand_id }}&shop_id={{ shop_id }}">
                        <img src="/static/img/i5.png"/>
                        <label>退品情况</label>

                        <p>¥ 0</p>
                    </a>
                    <a href="/commission.html?shop_id={{ shop_id }}">
                        <img src="/static/img/i6.png"/>
                        <label>员工提成</label>

                        <p>¥ 0</p>
                    </a>
                    <a href="/give.html?shop_id={{ shop_id }}">
                        <img src="/static/img/i7.png"/>
                        <label>菜品赠送</label>

                        <p>¥ {{ sale_total }}</p>
                    </a>
                    <a href="/timeMenu.html?shop_id={{ shop_id }}" class="timeMmenu">
                        <img src="/static/img/i8.png"/>
                        <label>时段菜品</label>

                        <p>&nbsp;</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="indexBottom">
            <div class="contrastBg">
                <h2>当日同业对比
                    <ul class="legendBg">
                        <li>
                            <label>今日数据:</label>
                            <span class="legend legend1"></span>
                        </li>
                        <li>
                            <label>上周同日:</label>
                            <span class="legend legend2"></span>
                        </li>
                        <li>
                            <label>差额:</label>
                            <span class="legend legend3"></span>
                        </li>
                    </ul>
                </h2>

                <a href="contrast.html?brand_id={{ brand_id }}&shop_id={{ shop_id }}">
                    <ul class="contrastList">
                        <li>
                            <label>桌均消费</label>

                            <div class="chart">
                                <div class="pillar">
                                    <p class="sameDay"><b
                                            class="line"></b><span>{{ compare_with_lastweek_data['桌均消费'] or 0 }}</span>
                                    </p>

                                    <p class="lastWeek"><b
                                            class="line"></b><span>{{ lastweeek_compare_with_lastweek_data['桌均消费'] or 0 }}</span>
                                    </p>
                                </div>
                                <p class="average"><span></span></p>
                            </div>
                        </li>
                        <li>
                            <label>人均消费</label>

                            <div class="chart">
                                <div class="pillar">
                                    <p class="sameDay"><b
                                            class="line"></b><span>{{ compare_with_lastweek_data['人均消费'] or 0 }}</span>
                                    </p>

                                    <p class="lastWeek"><b
                                            class="line"></b><span>{{ lastweeek_compare_with_lastweek_data['人均消费'] or 0 }}</span>
                                    </p>
                                </div>
                                <p class="average"><span></span></p>
                            </div>
                        </li>
                        <li>
                            <label>翻台率</label>

                            <div class="chart">
                                <div class="pillar">
                                    <p class="sameDay"><b
                                            class="line"></b><span>{{ compare_with_lastweek_data['翻台率'] or 0 }}%</span>
                                    </p>

                                    <p class="lastWeek"><b
                                            class="line"></b><span>{{ lastweeek_compare_with_lastweek_data['翻台率'] or 0 }}</span>
                                    </p>
                                </div>
                                <p class="average"><span></span></p>
                            </div>
                        </li>
                        <li>
                            <label>上座率</label>

                            <div class="chart">
                                <div class="pillar">
                                    <p class="sameDay"><b
                                            class="line"></b><span>{{ compare_with_lastweek_data['上座率'] or 0 }}%</span>
                                    </p>

                                    <p class="lastWeek"><b
                                            class="line"></b><span>{{ lastweeek_compare_with_lastweek_data['上座率'] or 0 }}</span>
                                    </p>
                                </div>
                                <p class="average"><span></span></p>
                            </div>
                        </li>
                    </ul>
                </a>

            </div>
        </div>
    </div>
    <div class="popupBox">
        <div class="popupBg"></div>
        <div class="popup">
            <h2>品牌门店选择</h2>
            <dl class="brandList">
                <dt>品牌</dt>
                <dd class="{% if brand_id=='' %}active{% endif %}"><a
                        href="{{ set_url_param({'brand_id':None}) }}">全部</a></dd>
                {% for key,info in brands.items() %}
                    <dd {% if brand_id==key %}class='active'{% endif %}>
                        <a href="{{ set_url_param({'brand_id':key,'shop_id':None}) }}">{{ info.name }}</a>
                    </dd>
                {% endfor %}

            </dl>
            <dl class="storeList">
                <dt>门店</dt>
                <dd class="{% if shop_id=='' %}active{% endif %}"><a href="{{ set_url_param({'shop_id':None}) }}">全部</a>
                </dd>
                {% for shop in shops %}
                    <dd {% if shop_id==shop.id %}class='active'{% endif %}
                            ><a href="{{ set_url_param({'shop_id':shop.id,'brand_id':brand_id}) }}">{{ shop.name }}</a>
                    </dd>
                {% endfor %}
            </dl>
        </div>
    </div>
</div>
<script type="text/javascript">
    var delay ={{ config.get("AJAX_REQUEST_DELAY") }};
    //选择日期
    $("#start_date").datetimePicker({
        language: 'zh-CN',
        m: 1,
        autoclose: true,
        startDate: new Date()
    }).on("click", function () {
        $("#start_date").datetimePicker("setEndDate", $("#end_date").val())
    });
    $("#end_date").datetimePicker({
        m: 1,
        language: 'zh-CN',
        autoclose: true,
        startDate: new Date()
    }).on("click", function () {
        $("#end_date").datetimePicker("setStartDate", $("#start_date").val())
    });


    //    支付方式饼图,菜品销售饼图
    $(function () {


{#        var default_payment_data = JSON.parse('{{ product_payment_data|safe }}');#}
        var default_payment_data = [];
        for (var i = 0; i++, i <= default_payment_data.length - 1;) {
            default_payment_data.push([default_payment_data[i]['支付方式'], parseFloat(default_payment_data[i]['今日支付金额'])])

        }
        if (default_payment_data.length == 0) {
            default_payment_data = [['暂无数据', 0.01]];
        }
        var payment_total = parseFloat("{{ payment_total }}");
        if (!payment_total) {
            var payment_chart_title = "实 收：无数据"
        }
        else {
            payment_chart_title = '实 收：' + payment_total
        }
        $('#paid').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            legend: {
                layout: 'vertical',
                align: 'right', //水平方向位置
                verticalAlign: 'top', //垂直方向位置
                x: 0, //距离x轴的距离
                y: 20, //距离Y轴的距离
                itemMarginBottom: 10,
                symbolRadius: false
            },
            title: {
                text: payment_chart_title
            },
            lang: {
                noData: "暂无数据"
            },
            noData: {

                position: {    //相对于绘图区定位无数据标签的位置。 默认值：[object Object].
                    //align: 'right',
                    //verticalAlign: 'bottom'
                },
                // Custom svg attributes
                attr: {     //无数据标签中额外的SVG属性
                    //'stroke-width': 1,
                    //stroke: '#cccccc'
                },
                // Custom css
                style: {    //对无数据标签的CSS样式。 默认值：[object Object].
                    //fontWeight: 'bold',
                    //fontSize: '15px',
                    //color: '#202030'
                }
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                size: '160%',
                name: '占比',
                center: ['50%', '50%'],
                data: default_payment_data
            }],
            credits: {
                enabled: false     //不显示LOGO
            }
        });
        var sale_chart_title = '菜品小类销售：{{ sale_total }}';
        $('#sale').highcharts({
            chart: {

                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            legend: {
                enabled: false
            },
            title: {
                text: sale_chart_title
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            lang: {
                noData: "暂无数据" //真正显示的文本
            },
            noData: {
                position: {
                    //相对于绘图区定位无数据标签的位置。 默认值：[object Object].
                    //align: 'right',
                    //verticalAlign: 'bottom'
                },
                // Custom svg attributes
                attr: {     //无数据标签中额外的SVG属性
                    //'stroke-width': 1,
                    //stroke: '#cccccc'
                },
                // Custom css
                style: {    //对无数据标签的CSS样式。 默认值：[object Object].
                    //fontWeight: 'bold',
                    //fontSize: '15px',
                    //color: '#202030'
                }
            },
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                            color: 'white'
                        },
                        format: ''
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                size: '160%',
                name: '菜品销售占比',
                center: ['50%', '50%'],
                data: [['暂无数据', 0.01]]
            }],
            credits: {
                enabled: false     //不显示LOGO
            }
        })

        var sale_chart = $('#sale').highcharts();
        var paid_chart = $('#paid').highcharts();
        window.onload = function () {
            update_highcharts()
        }
        function getRandom(n) {
            return Math.floor(Math.random() * n + 1)
        }

        function update_highcharts() {

            $.ajax({
                url: '/get_top_data',
                type: 'get',
                data: {
                    "shop_id": "{{ shop_id }}"
                },
                success: function (data) {

                    if (data.status) {

                        $(".ysze").text(data['应收总额']);
                        $(".yjje").text(data['已结金额']);
                        $(".wjje").text(data['未结金额']);
                        $(".rjxf").text(data['人均消费']);

                    }
                },
                error: function () {

                }
            });
            $.ajax({
                url: '/ajax_get_product_sale_info',
                type: 'get',
                data: {
                    "shop_id": "{{ shop_id }}",
                    "brand_id": "{{ brand_id }}"
                },
                success: function (data) {

                    if (data.status) {

                        var sale_data = JSON.parse(data.data.product_sale);
                        var payment_data = JSON.parse(data.data.product_payment);
                        var sale_chart_data = [];
                        var payment_chart_data = [];

                        for (var i = 0; i++, i <= payment_data.length - 1;) {
                            payment_chart_data.push([payment_data[i]['支付方式'], parseFloat(payment_data[i]['今日支付金额'])])

                        }
                        if (payment_data.length == 0) {
                            payment_chart_data = [['暂无数据', 0.01]];
                        }

                        for (var i = 0; i++, i <= sale_data.length - 1;) {
                            sale_chart_data.push([sale_data[i]['菜品小类'], parseFloat(sale_data[i]['百分比'])])

                        }
                        if (sale_data.length == 0) {
                            sale_chart_data = [['暂无数据', 0.01]];
                        }

                        sale_chart.series[0].setData(sale_chart_data);
                        paid_chart.series[0].setData(payment_chart_data);
                        $(".paid .right").empty().append(data.data.product_payment_right_html);
                        $(".sale .right").empty().append(data.data.product_sale_right_html);
                        setTimeout(update_highcharts, delay);
                    }


                },
                error: function () {

                }
            });

        }
    });
</script>
</body>
</html>
